<template>
  <div class="p-nav">
    <div class="nav-lang">
      <div>
        <span @click="_changeCh" :class="{activeL: lang === 1}" v-if="!!isChShow">中</span>
        <span @click="_changeEn" :class="{activeL: lang === 2}" v-if="!!isEnShow">En</span>
      </div>
    </div>
    <div class="nav-main">
      <img src="./logo.png" alt="" @click="toHome">
      <ul>
        <li :class="{active: current == 1}" @click="toHome">{{home}}</li>
        <router-link :to="{name: 'about'}" tag="li" :class="{active: current == 2}">{{about}}
          <ul>
            <li>
              <div>
                <router-link :to="{name: 'jianjie'}" tag="a">{{aboutBrief[0]}}</router-link>
                <router-link :to="{name: 'jianjie'}" tag="a">{{aboutBrief[0]}}</router-link>
              </div>
            </li>
            <li>
              <div>
                <router-link :to="{name: 'chanye'}" tag="a">{{aboutBrief[1]}}</router-link>
                <router-link :to="{name: 'chanye'}" tag="a">{{aboutBrief[1]}}</router-link>
              </div>
            </li>
            <li>
              <div>
                <router-link :to="{name: 'licheng'}" tag="a">{{aboutBrief[2]}}</router-link>
                <router-link :to="{name: 'licheng'}" tag="a">{{aboutBrief[2]}}</router-link>
              </div>
            </li>
            <li>
              <div>
                <router-link :to="{name: 'wenhua'}" tag="a">{{aboutBrief[3]}}</router-link>
                <router-link :to="{name: 'wenhua'}" tag="a">{{aboutBrief[3]}}</router-link>
              </div>
            </li>
          </ul>
        </router-link>
        <router-link :to="{name: 'news'}" tag="li" :class="{active: current == 3}" v-if="isShow">{{news}}
          <ul>
            <li>
              <div>
                <router-link :to="{name: 'news'}" tag="a">推荐新闻</router-link>
                <router-link :to="{name: 'news'}" tag="a">推荐新闻</router-link>
              </div>
            </li>
            <!-- <li>
              <div>
                <router-link :to="{name: 'news'}" tag="a">公司公告</router-link>
                <router-link :to="{name: 'news'}" tag="a">公司公告</router-link>
              </div>
            </li> -->
          </ul>
        </router-link>
        <router-link :to="{name: 'product'}" tag="li" :class="{active: current == 4}">{{product}}</router-link>
        <router-link :to="{name: 'yanfa'}" tag="li" :class="{active: current == 5}">{{yanfa}}
          <!-- <ul>
            <li>
              <div>
                <router-link :to="{name: 'yanfa'}" tag="a" href="#s1">研发成果</router-link>
                <router-link :to="{name: 'yanfa'}" tag="a" href="#s1">研发成果</router-link>
              </div>
            </li>
            <li>
              <div>
                <router-link :to="{name: 'yanfa'}" tag="a" href="#s2">研发平台</router-link>
                <router-link :to="{name: 'yanfa'}" tag="a" href="#s2">研发平台</router-link>
              </div>
            </li>
            <li>
              <div>
                <router-link :to="{name: 'yanfa'}" tag="a" href="#s3">研发团队</router-link>
                <router-link :to="{name: 'yanfa'}" tag="a" href="#s3">研发团队</router-link>
              </div>
            </li>
          </ul> -->
        </router-link>
        <router-link :to="{name: 'zannue'}" tag="li" :class="{active: current == 6}" v-if="isShow">{{rencai}}
          <ul>
            <li>
              <div>
                <router-link :to="{name: 'society'}" tag="a">{{footList.rencaiList[1]}}</router-link>
                <router-link :to="{name: 'society'}" tag="a">{{footList.rencaiList[1]}}</router-link>
              </div>
            </li>
            <li>
              <div>
                <router-link :to="{name: 'school'}" tag="a">{{footList.rencaiList[2]}}</router-link>
                <router-link :to="{name: 'school'}" tag="a">{{footList.rencaiList[2]}}</router-link>
              </div>
            </li>
          </ul>
        </router-link>
        <router-link :to="{name: 'lianxi'}" tag="li" :class="{active: current == 7}">{{lianxi}}</router-link>
        <!-- <router-link :to="{{item.to}}" tag="li" v-for="item in items" :key="item.name">{{item.name}}</router-link> -->
      </ul>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  name: 'vNav',
  data () {
    return {
      // navList: [
      //   {
      //     home: '首页'
      //   },
      //   {
      //     about: '关于我们'
      //   }
      // ]
      home: '',
      about: '',
      news: '',
      product: '',
      yanfa: '',
      rencai: '',
      lianxi: '',
      isShow: true
      // items: [
      //   {'to': '{name: 'home'}', 'name': '我'},
      //   {'to': '{name: 'about'}', 'name': '为'},
      //   {'to': '{name: 'news'}', 'name': '个'},
      //   {'to': '{name: 'product'}', 'name': '好'},
      //   {'to': '{name: 'yanfa'}', 'name': '吧'},
      //   {'to': '{name: 'zannue'}', 'name': '发'},
      //   {'to': '{name: 'lianxi'}', 'name': '你'}
      // ]
    }
  },
  props: {
    items: {
      type: Array
    },
    current: {
      type: String
    },
    isEnShow: {
      type: Boolean,
      default: true
    },
    isChShow: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    ...mapGetters({
      'lang': 'lang',
      'aboutBrief': 'aboutBrief',
      'footList': 'footList'
    })
  },
  methods: {
    // _changeEn () {
    //   this.items = [
    //     {'to': '{name: 'home'}', 'name': 'home'},
    //     {'to': '{name: 'about'}', 'name': 'about'},
    //     {'to': '{name: 'news'}', 'name': 'news'},
    //     {'to': '{name: 'product'}', 'name': 'product'},
    //     {'to': '{name: 'yanfa'}', 'name': 'yanfa'},
    //     {'to': '{name: 'zannue'}', 'name': 'zannue'},
    //     {'to': '{name: 'lianxi'}', 'name': 'lianxi'}
    //   ]
    // }
    _changeEn () {
      // this.navList = [
      //   {
      //     home: 'home'
      //   },
      //   {
      //     about: 'about'
      //   }
      // ]
      this.home = 'Home'
      this.about = 'About Us'
      this.news = 'News'
      this.product = 'Products'
      this.yanfa = 'R & D CENTER'
      this.rencai = 'Recruitment'
      this.lianxi = 'Contact'
      this.lang = 2
      this.$store.dispatch('saveLang', 2)
      this.setCookie('saveLang', 2)
      this._getEnList()
    },
    _changeCh () {
      this.home = '首页'
      this.about = '关于我们'
      this.news = '新闻中心'
      this.product = '产品中心'
      this.yanfa = '研发中心'
      this.rencai = '人才招聘'
      this.lianxi = '联系我们'
      this.lang = 1
      this.$store.dispatch('saveLang', 1)
      this.setCookie('saveLang', 1)
      this._getChList()
    },
    toHome () {
      this.$router.push({name: '/'})
      // this.$store.dispatch('saveLang', 3)
      window.location.reload()
    },
    setCookie (name, value) {
      console.log(1111111)
      let Days = 30;
      let exp = new Date()
      exp.setTime(exp.getTime() + Days*24*60*60*1000)
      document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString()
    },
    _getEnList () {
      this.isShow = false
      console.log('英文版')
      let lists = [
        {
          name: 'zhangshan ww wetrwet tgfgfg retwet srds tgdfw vbdsd'
        }
      ]
      let EnDataList = {
        titleSrc: '@/assets/home/1-title-en.png',
        productionBase: 'Factory',
        institute: 'Acadamy',
        listData: lists,
        newsTitle: '新闻中心'
      }
      this.$emit('EnData', EnDataList)
      this.$store.dispatch('saveFootCh', 2)
    },
    _getChList () {
      this.isShow = true
      console.log('中文版')
      let lists = [
        {
          name: '先后投入数十亿元在全国范围内战略布局，逐步形成了以普药生产、原料药生产、冻干粉针生产、管制药生产、中药制剂生产和吸入气雾剂生产等'
        }
      ]
      let ChDataList = {
        titleSrc: '@/assets/home/1-title.png',
        productionBase: '生产基地',
        institute: '研究院',
        listData: lists,
        newsTitle: 'News Center'
      }
      this.$emit('ChData', ChDataList)
      this.$store.dispatch('saveFootCh', 1)
    },
    getCookie (name) {
      var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
      if(arr=document.cookie.match(reg))
        return unescape(arr[2])
      else
        return null
    },
    version () {
      let aa = this.getCookie('saveLang') || 1
      this.$store.dispatch('saveLang', parseInt(aa))
      if (aa == 1) {
        this.lang = 1
        this._getChList()
      }
      if (aa == 2) {
        this.lang = 2
        this._getEnList()
      }
      // if (this.lang === 1) {
      //   this._getChList()
      // }
      // if (this.lang === 2) {
      //   this._getEnList()
      // }
      // this._getEnList()
    }
  },
  created () {
    this.lang = this.lang
    this.version()
    if (this.lang === 1) {
      this.home = '首页'
      this.about = '关于我们'
      this.news = '新闻中心'
      this.product = '产品中心'
      this.yanfa = '研发中心'
      this.rencai = '人才招聘'
      this.lianxi = '联系我们'
    }
    if (this.lang === 2) {
      this.home = 'Home'
      this.about = 'About Us'
      this.news = 'News'
      this.product = 'Products'
      this.yanfa = 'R & D'
      this.rencai = 'Recruitment'
      this.lianxi = 'Contact'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .active {
    font-size: 20px;
    color: #2154b9!important
  }
  .activeL {
    background-color: #2154b9!important;
  }
  .p-nav {
    box-shadow: 0px 10px 18px 0px rgba(134, 157, 236, 0.47);
    position: relative;
    z-index: 999999
  }
  .nav-lang {
    height: 40px;
    background-color: #fafafa;
    div {
      width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      span {
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background-color: #ccc;
        font-size: 16px;
        color: #fff;
        cursor: pointer
      }
    }
  }
  .nav-main {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    position: relative;
    z-index: 9999;
    img {
      cursor: pointer
    }
    >ul {
      list-style: none;
      display: flex;
      position: relative;
      z-index: 9999;
      >li {
        height: 80px;
        padding: 0 20px;
        // text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        // border-right: 2px solid #d8d8d8;
        font-size: 16px;
        color: #666;
        position: relative;
        // overflow: hidden;
        >ul {
          list-style: none;
          position: absolute;
          left: 0px;
          top: 80px;
          z-index: 22;
          opacity: 0;
          li {
            width: 104px;
            text-align: center;
            line-height: 50px;
            background-color: #fff;
            color: #fff;
            height: 50px;
            position: relative;
            overflow: hidden;
            div {
              width: 213px;
              position: absolute;
              left: -106px;
              transition: all .5s;
              a {
                display: inline-block;
                width: 104px;
                text-align: center;
                height: 50px;
                line-height: 50px;
                background-color: #fff;
                color: #666;
                text-decoration: none;
              }
              a:nth-child(1) {
                background-color: #2154b9;
              }
            }
          }
          li:hover div {
            position: absolute;
            left: 0px;
            transition: all .5s;
            a {
              color: #fff
            }
          }
          // li:nth-child(1) {
          //   width: 104px;
          //   text-align: center;
          //   line-height: 80px;
          // }
        }
      }
      >li:after {
        content: "";
        width: 0%;
        height: 4px;
        background-color: #2154b9;
        position: absolute;
        left: 20%;
        top: 46px;
      }
      >li:hover {
        height: 79px;
        // height: 60px;
        color: #2154b9;
        background-color: #ededed;
        cursor: pointer;
        overflow: visible
        // overflow: visible;
        // ul {
        //   position: absolute;
        //   left: 20px;
        //   top: 0px;
        //   width: 103px;
        //   text-align: center;
        //   transition: all 1s;
        //   li {
        //     height: 60px;
        //     line-height: 60px;
        //     background-color: red;
        //     color: #fff
        //   }
        //   li:nth-child(1) {
        //     height: 80px;
        //     line-height: 80px;
        //     background-color: black;
        //     color: #fff
        //   }
        // }
      }
      >li:hover:after {
        color: #fff;
        width: 60%;
        cursor: pointer;
        left: 20%;
        top: 75px;
        transition: width .5s
      }
      >li:hover ul {
        opacity: 1;
        // background-color: #2154b9;
        transition: all .5s;
        // li {
        //   background-color: #2154b9
        // }
      }
    }
  }
</style>
